<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #bj {
            background-color: aqua;
            width: 300px;
            display: none;
        }
    </style>
</head>

<body>
    <table id="table" border="1">
        <tr>
            <td>商品ID</td>
            <td>商品名称</td>
            <td>商品价格</td>
            <td>商品创作</td>
            <td>商品照片</td>
            <td>商品详情</td>
            <td>商品进口</td>
            <td>操作</td>

        </tr>
    </table>
    <div id="bj">
        商品名称：<input type="text" id="goodsName"><br>
        商品价格：<input type="text" id="goodsPrice"><br>
        商品创作：<input type="text" id="goodSdetail"><br>
        商品照片：<input type="text" id="goodsPhoto"><br>
        商品详情：<input type="text" id="goodslnventory"><br>
        商品进口: <input type="text" id="goodsCreationTime"><br>
        <button onclick="queren()">确认</button>
        <button onclick="flase()">取消</button>
    </div>
    <div id="bjyx">
        商品名称：<input type="text" id="EgoodsName"><br>
        商品价格：<input type="text" id="EgoodsPrice"><br>
        商品创作：<input type="text" id="EgoodSdetail"><br>
        商品照片：<input type="text" id="EgoodsPhoto"><br>
        商品详情：<input type="text" id="Egoodslnventory"><br>
        商品进口: <input type="text" id="EgoodsCreationTime"><br>
    </div>

    <script src="jquery-3.7.1.js"></script>
    <script>
        function sout() {
            $.ajax({
                url: "http://172.16.106.87:8080/ShowGoods",
                type: "get",
                success: function (e) {
                    console.log(e);
                    var obj = e.data
                    let str = ""
                    for (let i = 0; i < obj.length; i++) {
                        str = `
                   <tr>
                    <td>${obj[i].goodsId}</td>
                    <td>${obj[i].goodsName}</td>
                    <td>${obj[i].goodsPrice}</td>
                    <td>${obj[i].goodSdetail}</td>
                    <td>${obj[i].goodsPhoto}</td>
                    <td>${obj[i].goodslnventory}</td>
                    <td>${obj[i].goodsCreationTime}</td>
                    <td>
                    <button onclick="zeng1()">新增</button>
                    <button onclick="del(${obj[i].goodsId})">删除</button>
                    <button onclick="bj1(${obj[i].goodsId})">编辑</button>
                    </td>
                </tr>
                `
                        $("#table").append(str)

                    }

                }
            })
        }
        sout()
        function del(id) {
            $.ajax({
                url: "http://172.16.106.87:8080/delGoods",
                type: "post",
                data: {
                    id: id
                },
                success: function (res) {
                    console.log(res);
                    location.reload()
                }
            })
        }
        function zeng1() {
            $("#bj").show()
        }
        function flase() {
            $("#bj").hide()
        }
        function queren() {
            $.ajax({
                url: "http://172.16.106.87:8080/addGoods",
                type: "post",
                data: {
                    goodsName: $("#goodsName").val(),
                    goodsPrice: $("#goodsPrice").val(),
                    goodSdetail: $("#goodSdetail").val(),
                    goodsPhoto: $("#goodsPhoto").val(),
                    goodslnventory: $("#goodslnventory").val(),
                    goodsCreationTime: $("#goodsCreationTime").val(),
                },
                success: function (res) {
                    console.log(res);
                    if (res.code == 200) {
                        alert("新增成功")
                        sout()
                    }
                }
            })
}
                function bj1(id){
                    console.log( $("#EgoodsName").val()+"---"+$("#EgoodsPrice").val()+"---"+ $("#EgoodSdetail").val()+"---"+$("#EgoodsPhoto").val()+"---"+$("#Egoodslnventory").val()+"---"+ $("#EgoodsCreationTime").val());
                    
                $.ajax({
                    url: "http://172.16.106.87:8080/upDataGoods",
                    type: "post",
                    data: {
                        goodsId:id,
                        goodsName: $("#EgoodsName").val(),
                        goodsPrice: $("#EgoodsPrice").val(),
                        goodSdetail: $("#EgoodSdetail").val(),
                        goodsPhoto: $("#EgoodsPhoto").val(),
                        goodslnventory: $("#Egoodslnventory").val(),
                        goodsCreationTime: $("#EgoodsCreationTime").val(),
                    },
                    success: function (res) {
                        console.log(res);

                    }
                })
            }
        

    </script>
</body>

</html>